<template>
  <!-- 资讯列表页面 -->
  <div class="my_article">
    <!-- 按钮 -->
    <div class="btns">
      <el-row>
        <el-col :span="16">
          <el-form :inline="true" :model="searchForm" size="small">
            <el-form-item>
              <el-select v-model="searchForm.status" placeholder="状态" clearable>
                <el-option label="未审核" value="未审核" />
                <el-option label="审核通过" value="审核通过" />
                <el-option label="审核不通过" value="审核不通过" />
                <el-option label="推荐" value="推荐" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input v-model="searchForm.title" placeholder="标题" clearable />
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="searchForm.categoryId"
                placeholder="请选择栏目"
                clearable
              >

                <el-option
                  v-for="item in category"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="toSearch" />
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="8" style="text-align:right">
          <el-button type="primary" icon="el-icon-plus" size="small" @click="toPublishArticle" />
        </el-col>
      </el-row>
    </div>
    <!-- 表格!! -->
    <el-table v-loading="loading" :data="articleData" style="width: 100%" size="mini" @row-click="toDetails">
      <el-table-column type="index" :index="1" label="序号" align="center" />
      <el-table-column label="封面" width="150" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.cover" alt="" style="width:100%">
        </template>
      </el-table-column>
      <el-table-column label="风采">
        <template slot-scope="scope">
          <div style="font-weight:bold">{{ scope.row.title }}</div>
          <div>{{ scope.row.baseUser && scope.row.baseUser.realname }}</div>
          <div>{{ scope.row.category && scope.row.category.name }}</div>
          {{ moment(scope.row.publishTime).format("YYYY-MM-DD") }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === '审核通过'" type="success">{{ scope.row.status }}</el-tag>
          <el-tag v-else-if="scope.row.status === '审核不通过'" type="danger">{{ scope.row.status }}</el-tag>
          <el-tag v-else-if="scope.row.status === '推荐'" type="warning">{{ scope.row.status }}</el-tag>
          <el-tag v-else type="info">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-button type="primary" :disabled="scope.row.status !== '审核通过'&&scope.row.status !== '未审核'" size="mini" @click.stop="toRecommend(scope.row.id,'推荐')">推荐</el-button>
          <el-button type="success" :disabled="scope.row.status !== '未审核'" size="mini" @click.stop="toCheckArticle(scope.row)">审核</el-button>
          <el-button type="danger" size="mini" @click.stop="deleteArticleById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="page-div">
      <el-pagination
        :current-page="params.page"
        :page-sizes="[2,5,10,15,20,30]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="float:right;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 审核 -->
    <el-dialog class="customer_modal" title="审核风采信息" :visible.sync="visible" width="60%">
      <el-form ref="ruleForm" :model="form">
        <el-form-item style="text-align:center;font-size:18px; line-height:2em">
          {{ article.title }}
        </el-form-item>
        <el-form-item v-html="article.content" />
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="checkHandler(article.id,'审核不通过')">审核不通过</el-button>
        <el-button type="primary" @click="checkHandler(article.id,'审核通过')">审核通过</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import { pageQueryPro, changeStatus, ArticledeleteById } from '@/api/article'
import moment from 'moment'
import { findAll } from '@/api/infoCategory'

export default {
  data() {
    return {
      category: [],
      searchForm: {
        name: '',
        status: '',
        categoryId: ''
      },
      articleData: [],
      loading: false,
      visible: false,
      // 分页参数
      params: {
        page: 1,
        pageSize: 10
      },
      total: 0,
      article: {},
      form: {}
    }
  },
  computed: {

  },
  watch: {
    params: {
      handler: function(old, now) {
        this.queryData()
      },
      deep: true
    }
  },
  created() {
    this.queryCategoryData()
    this.queryData()
  },
  mounted() {},
  methods: {
    toSearch() {
      this.queryData()
    },
    toPublishArticle() {
      // 跳转页面
      this.$router.push({
        path: '/admin/info/article/Publish'
      })
    },
    // 点击查看详情
    toDetails(row) {
      this.$router.push({
        path: '/admin/info/article/Details',
        query: { id: row.id }
      })
    },
    moment,
    // 获取产品分类数据
    async queryCategoryData() {
      const res = await findAll()
      this.category = res.data
    },
    async queryData() {
      this.loading = true
      const temp = {
        ...this.params,
        ...this.searchForm
      }
      // 删除空值属性
      // 遍历对象
      for (const key in temp) {
        // key是对象，代表属性名
        console.log(key, temp[key])
        if (!temp[key]) {
          delete temp[key]
        }
      }
      const res = await pageQueryPro(temp)
      this.loading = false
      this.articleData = res.data.list
      this.total = res.data.total
    },
    // 每页条数发生变化时的事件处理程序
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.params.pageSize = val
      this.params.page = 1
    },
    // 每页页码发生变化时的事件处理程序
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.params.page = val
    },
    toCheckArticle(row) {
      this.visible = true
      this.article = row
    },
    // 审核
    async checkHandler(id, status) {
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          console.log('校验通过！')
          const obj = {
            id,
            status
          }
          const res = await changeStatus(obj)
          // 提示用户保存成功，刷新表格数据并关闭模态框
          this.$notify.success({
            title: '成功',
            message: res.message
          })
          this.queryData()
          this.visible = false
        } else {
          return false
        }
      })
    },
    // 通过id删除
    deleteArticleById(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await ArticledeleteById({ id })
        this.$message({
          type: 'success',
          message: res.message
        })
        this.queryData()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 推荐
    toRecommend(id, status) {
      this.$confirm('你确定要推荐此资讯?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const obj = {
          id,
          status
        }
        const res = await changeStatus(obj)
        this.$message({
          type: 'success',
          message: res.message
        })
        this.queryData()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消推荐'
        })
      })
    }
  }
}
</script>
<style scoped>
</style>
